<template>
    <!-- 顶部导航栏 -->
    <HeaderNav active-menu="circle" />
    <div class="circle-detail-container">
        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 左侧：圈子信息 -->
            <div class="circle-info-section">
                <div class="circle-info-card">
                    <div class="circle-header">
                        <div class="circle-name">{{ circleInfo.name }}</div>
                        <div class="circle-type">{{ circleInfo.type }}</div>
                    </div>

                    <div class="circle-description">
                        {{ circleInfo.description }}
                    </div>

                    <div class="circle-stats">
                        <div class="stat-item">
                            <span class="stat-number">{{ circleInfo.member_count }}</span>
                            <span class="stat-label">成员</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">{{ circleInfo.post_count }}</span>
                            <span class="stat-label">帖子</span>
                        </div>
                    </div>

                    <div class="circle-actions">
                        <el-button v-if="circleInfo.joined" type="danger" @click="handleLeaveCircle" :loading="leaving"
                            class="action-btn leave-btn">
                            退出圈子
                        </el-button>
                        <el-button v-else type="primary" @click="handleJoinCircle" :loading="joining"
                            class="action-btn join-btn">
                            加入圈子
                        </el-button>
                    </div>
                </div>

                <!-- 圈子成员预览 -->
                <div class="members-preview">
                    <div class="section-title">圈子成员</div>
                    <div class="members-list">
                        <div v-for="member in previewMembers" :key="member.user_id" class="member-item">
                            <div class="avatar-container">
                                <img :src="member.avatar" alt="头像" class="member-avatar" />
                            </div>
                            <span class="member-name">{{ member.nickname ? member.nickname : '未知用户' }}</span>
                        </div>
                    </div>
                    <div v-if="totalMembers > 5" class="more-members">
                        等 {{ totalMembers }} 人
                    </div>
                </div>
            </div>

            <!-- 右侧：帖子列表 -->
            <div class="posts-section">
                <!-- 发布帖子区域 -->
                <div class="post-create-card">
                    <div class="create-header">
                        <div class="avatar-container">
                            <img :src="userStore.getUserAvatar() || '/default-avatar.png'" alt="头像"
                                class="user-avatar" />
                        </div>
                        <div class="user-info">
                            <div class="username">{{ userStore.getDisplayName() }}</div>
                            <div class="post-hint">在圈子中分享你的想法...</div>
                        </div>
                    </div>

                    <div class="create-content">
                        <el-input v-model="newPostContent" type="textarea" :rows="3" placeholder="分享你的校园回忆、学习经验或生活感悟..."
                            maxlength="500" show-word-limit resize="none" class="content-input" />

                        <!-- 图片预览 -->
                        <div v-if="postImages.length > 0" class="image-preview">
                            <div v-for="(image, index) in postImages" :key="index" class="image-item">
                                <img :src="image.url" alt="预览图片" @click="previewImages(index)" />
                                <div class="image-actions">
                                    <el-icon @click="removeImage(index)">
                                        <Close />
                                    </el-icon>
                                </div>
                            </div>
                        </div>

                        <!-- 操作栏 -->
                        <div class="create-actions">
                            <div class="action-buttons">
                                <el-tooltip content="添加图片" placement="top">
                                    <el-button text @click="triggerImageUpload" class="image-upload-btn">
                                        <el-icon>
                                            <Picture />
                                        </el-icon>
                                        <span>添加图片</span>
                                    </el-button>
                                </el-tooltip>
                            </div>

                            <el-button type="primary" :disabled="!newPostContent.trim() || posting" :loading="posting"
                                class="publish-btn" @click="handleCreatePost">
                                发布
                            </el-button>
                        </div>

                        <!-- 隐藏的文件输入 -->
                        <input ref="fileInput" type="file" multiple accept="image/*" @change="handleImageSelect"
                            style="display: none" />
                    </div>
                </div>

                <!-- 帖子列表 -->
                <div class="posts-list">
                    <div v-if="postsLoading && posts.length === 0" class="loading-state">
                        <el-icon class="is-loading">
                            <Loading />
                        </el-icon>
                        <span>加载中...</span>
                    </div>

                    <template v-else>
                        <CirclePostItem v-for="post in posts" :key="post.post_id" :post="post"
                            @refresh="fetchCirclePosts" @delete="handlePostDelete" />

                        <div v-if="posts.length === 0" class="empty-state">
                            <div class="empty-illustration">
                                <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
                                    <path
                                        d="M60 15C45 15 30 25 30 45C30 65 45 75 60 75C75 75 90 65 90 45C90 25 75 15 60 15Z"
                                        fill="#F5F7FA" stroke="#E4E7ED" stroke-width="2" />
                                    <path d="M45 45C45 37 50 30 60 30C70 30 75 37 75 45" stroke="#C0C4CC"
                                        stroke-width="2" stroke-linecap="round" />
                                    <circle cx="50" cy="40" r="2" fill="#909399" />
                                    <circle cx="70" cy="40" r="2" fill="#909399" />
                                    <path d="M30 75V105H90V75" stroke="#E4E7ED" stroke-width="2" />
                                    <path d="M40 85H80" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" />
                                    <path d="M40 95H70" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" />
                                </svg>
                            </div>
                            <p class="empty-text">暂无帖子，快来发布第一条吧！</p>
                        </div>

                        <!-- 加载更多 -->
                        <div v-if="postsHasMore" class="load-more">
                            <el-button :loading="postsLoading" :disabled="postsLoading" @click="loadMorePosts" text
                                class="load-more-btn">
                                {{ postsLoading ? '加载中...' : '加载更多' }}
                            </el-button>
                        </div>

                        <div v-else-if="posts.length > 0" class="no-more">
                            <div class="no-more-line"></div>
                            <span class="no-more-text">没有更多帖子了</span>
                            <div class="no-more-line"></div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- 图片预览对话框 -->
        <el-dialog v-model="imagePreviewVisible" :title="`图片 ${currentImageIndex + 1} / ${postImages.length}`"
            width="80%" top="5vh" align-center class="image-preview-dialog">
            <div class="image-preview-container">
                <img :src="currentImageUrl" alt="预览图片" class="preview-image" />
                <div class="preview-actions">
                    <el-button @click="prevImage" :disabled="currentImageIndex === 0" class="nav-btn">
                        <el-icon>
                            <ArrowLeft />
                        </el-icon>
                        上一张
                    </el-button>
                    <el-button @click="nextImage" :disabled="currentImageIndex === postImages.length - 1"
                        class="nav-btn">
                        下一张
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" @click="imagePreviewVisible = false" class="close-btn">
                        关闭
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Loading, Picture, Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useCirclesStore } from '@/stores/circles'
import { useCirclePostsStore } from '@/stores/circle_posts'
import { useUserStore } from '@/stores/user'
import HeaderNav from '@/components/layout/HeaderNav.vue'
import CirclePostItem from '../components/circlePost/CirclePostItem.vue'

const route = useRoute()
const router = useRouter()
const circlesStore = useCirclesStore()
const circlePostsStore = useCirclePostsStore()
const userStore = useUserStore()

const circleId = ref(parseInt(route.params.circleId))

// 圈子信息相关
const circleInfo = ref({})
const previewMembers = ref([])
const totalMembers = ref(0)
const joining = ref(false)
const leaving = ref(false)

// 帖子相关
const posts = ref([])
const postsLoading = ref(false)
const postsHasMore = ref(true)
const postsPage = ref(1)
const postsPageSize = ref(10)

// 发布帖子相关
const newPostContent = ref('')
const postImages = ref([])
const posting = ref(false)
const fileInput = ref(null)

// 图片预览相关
const imagePreviewVisible = ref(false)
const currentImageIndex = ref(0)
const currentImageUrl = computed(() => postImages.value[currentImageIndex.value]?.url || '')

// 获取圈子详情和用户加入状态
const fetchCircleDetail = async () => {
    try {
        //获取圈子基本信息
        const response = await circlesStore.fetchCircleDetailAction(circleId.value)
        if (response.code === 0) {
            circleInfo.value = response.data
        }
        await fetchUserJoinStatus()
    } catch (error) {
        ElMessage.error('获取圈子详情失败：' + error.message)
    }
}

const fetchUserJoinStatus = async () => {
    try {
        const response = await circlesStore.fetchCircleMembersAction(circleId.value, {
            page: 1,
            pageSize: 100 // 获取足够多的成员来查找当前用户
        })
        if (response.code === 0) {
            const members = response.data.list || []
            const currentUserId = userStore.getUserId()

            // 检查当前用户是否在成员列表中
            const isJoined = members.some(member => member.user_id === currentUserId)
            circleInfo.value.joined = isJoined
        }
    } catch (error) {
        console.error('获取用户加入状态失败：', error)
    }
}

// 获取圈子成员预览
const fetchCircleMembers = async () => {
    try {
        const response = await circlesStore.fetchCircleMembersAction(circleId.value, {
            page: 1,
            pageSize: 5
        })
        if (response.code === 0) {
            previewMembers.value = response.data.list || []
            totalMembers.value = response.data.pagination?.total || 0
        }
    } catch (error) {
        console.error('获取圈子成员失败：', error)
    }
}

// 获取圈子帖子列表
const fetchCirclePosts = async () => {
    try {
        postsLoading.value = true
        const response = await circlePostsStore.fetchCirclePostsAction(circleId.value, {
            page: postsPage.value,
            pageSize: postsPageSize.value
        })
        if (response.code === 0) {
            if (postsPage.value === 1) {
                posts.value = response.data.list || []
            } else {
                posts.value = [...posts.value, ...(response.data.list || [])]
            }

            const currentList = response.data.list || []
            postsHasMore.value = currentList.length === postsPageSize.value
        }
    } catch (error) {
        ElMessage.error('获取帖子列表失败：' + error.message)
    } finally {
        postsLoading.value = false
    }
}

// 加载更多帖子
const loadMorePosts = async () => {
    if (!postsHasMore.value || postsLoading.value) return

    postsPage.value += 1
    await fetchCirclePosts()
}

// 在加入/退出圈子成功后，也需要更新加入状态
const handleJoinCircle = async () => {
    try {
        joining.value = true
        const response = await circlesStore.joinCircleAction(circleId.value)
        if (response.code === 0) {
            ElMessage.success('加入圈子成功')
            // 更新用户加入状态
            circleInfo.value.joined = true
            // 重新获取帖子列表
            await fetchCirclePosts()
        }
    } catch (error) {
        ElMessage.error('加入圈子失败：' + error.message)
    } finally {
        joining.value = false
    }
}

const handleLeaveCircle = async () => {
    try {
        leaving.value = true
        const response = await circlesStore.leaveCircleAction(circleId.value)
        if (response.code === 0) {
            ElMessage.success('退出圈子成功')
            // 更新用户加入状态
            circleInfo.value.joined = false
            // 更新成员数量
            //circleInfo.value.member_count = Math.max(0, circleInfo.value.member_count - 1)
            // 重新获取帖子列表
            await fetchCirclePosts()
        }
    } catch (error) {
        ElMessage.error('退出圈子失败：' + error.message)
    } finally {
        leaving.value = false
    }
}

// 图片上传相关方法
const triggerImageUpload = () => {
    fileInput.value.click()
}

const handleImageSelect = async (event) => {
    const files = Array.from(event.target.files)
    if (files.length + postImages.value.length > 9) {
        ElMessage.warning('最多只能上传9张图片')
        return
    }

    for (const file of files) {
        try {
            // 显示本地预览
            const url = URL.createObjectURL(file)
            const newImage = {
                url,
                file,
                uploading: true
            }
            postImages.value.push(newImage)

            // 上传到服务器
            const response = await circlePostsStore.uploadCirclePostImage(file)
            if (response.code === 0) {
                const imageIndex = postImages.value.findIndex(img => img.url === url)
                if (imageIndex !== -1) {
                    // 释放本地预览的 URL
                    URL.revokeObjectURL(url)
                    postImages.value[imageIndex].url = response.data.url
                    postImages.value[imageIndex].uploading = false
                }
            } else {
                throw new Error(response.msg)
            }
        } catch (error) {
            console.error('图片上传失败:', error)
            ElMessage.error('图片上传失败')
            // 移除上传失败的图片
            const failedIndex = postImages.value.findIndex(img => img.uploading)
            if (failedIndex !== -1) {
                const failedImage = postImages.value[failedIndex]
                URL.revokeObjectURL(failedImage.url)
                postImages.value.splice(failedIndex, 1)
            }
        }
    }

    // 清空文件输入
    event.target.value = ''
}

const removeImage = (index) => {
    if (index >= 0 && index < postImages.value.length) {
        const image = postImages.value[index]
        // 如果是本地预览的 URL，需要释放
        if (image.url.startsWith('blob:')) {
            URL.revokeObjectURL(image.url)
        }
        postImages.value.splice(index, 1)
    }
}

// 图片预览功能
const previewImages = (index) => {
    currentImageIndex.value = index
    imagePreviewVisible.value = true
}

const prevImage = () => {
    if (currentImageIndex.value > 0) {
        currentImageIndex.value--
    }
}

const nextImage = () => {
    if (currentImageIndex.value < postImages.value.length - 1) {
        currentImageIndex.value++
    }
}

// 创建帖子
const handleCreatePost = async () => {
    if (!newPostContent.value.trim()) {
        ElMessage.warning('请输入内容')
        return
    }

    if (!circleInfo.value.joined) {
        ElMessage.warning('请先加入圈子才能发帖')
        return
    }

    posting.value = true
    try {
        const postData = {
            circle_id: circleId.value,
            content: newPostContent.value.trim(),
        }
        console.log(typeof postData.circle_id);
        // 处理图片数据
        if (postImages.value.length > 0) {
            postData.images = postImages.value.map(img => img.url)
        }

        const result = await circlePostsStore.createPostAction(postData)
        if (result && result.code === 0) {
            // 清空表单
            newPostContent.value = ''
            postImages.value = []

            ElMessage.success('发布成功')

            // 重新获取帖子列表和圈子信息
            postsPage.value = 1
            await fetchCirclePosts()
            await fetchCircleDetail()
        } else {
            throw new Error(result?.msg || '发布失败')
        }
    } catch (error) {
        console.error('发布失败:', error)
        ElMessage.error('发布失败：' + error.message)
    } finally {
        posting.value = false
    }
}

// 监听帖子删除事件，更新帖子数量
const handlePostDelete = (postId) => {
    // 更新帖子数量
    circleInfo.value.post_count = Math.max(0, circleInfo.value.post_count - 1)
    // 重新获取帖子列表
    fetchCirclePosts()
}

// 监听圈子ID变化
watch(() => route.params.circleId, (newId) => {
    circleId.value = parseInt(newId)
    postsPage.value = 1
    fetchCircleDetail()
    fetchCircleMembers()
    fetchCirclePosts()
})

onMounted(() => {
    fetchCircleDetail()
    fetchCircleMembers()
    fetchCirclePosts()
})
</script>

<style scoped>
.circle-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.main-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}

/* 左侧圈子信息样式 */
.circle-info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.circle-info-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circle-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.circle-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f2f5;
}

.circle-name {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.2;
}

.circle-type {
    font-size: 14px;
    color: #409eff;
    background: linear-gradient(135deg, #ecf5ff 0%, #f0f7ff 100%);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid #d9ecff;
    font-weight: 500;
}

.circle-description {
    font-size: 15px;
    color: #606266;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 12px 0;
}

.circle-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
    padding: 16px 0;
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #409eff;
    margin-bottom: 4px;
}

.stat-label {
    display: block;
    font-size: 13px;
    color: #909399;
    font-weight: 500;
}

.circle-actions {
    text-align: center;
}

.action-btn {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.join-btn {
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border: none;
}

.join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.4);
}

.leave-btn {
    background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
    border: none;
}

.leave-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(245, 108, 108, 0.4);
}

.members-preview {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.section-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border-radius: 2px;
    margin-right: 8px;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.member-item:hover {
    background-color: #f8f9fa;
}

.avatar-container {
    position: relative;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e4e7ed;
    transition: border-color 0.3s ease;
}

.member-item:hover .member-avatar {
    border-color: #409eff;
}

.member-name {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
}

.more-members {
    font-size: 13px;
    color: #909399;
    text-align: center;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    font-weight: 500;
}

/* 右侧帖子区域样式 */
.posts-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-create-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.create-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 16px;
    border: 3px solid #f0f2f5;
    transition: border-color 0.3s ease;
}

.create-header:hover .user-avatar {
    border-color: #409eff;
}

.user-info {
    flex: 1;
}

.username {
    font-weight: 700;
    margin-bottom: 4px;
    color: #303133;
    font-size: 16px;
}

.post-hint {
    font-size: 13px;
    color: #909399;
}

.content-input {
    margin-bottom: 20px;
}

:deep(.content-input .el-textarea__inner) {
    border: none;
    padding: 16px;
    font-size: 15px;
    line-height: 1.6;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

:deep(.content-input .el-textarea__inner:focus) {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    background: white;
    border-color: #409eff;
}

:deep(.content-input .el-input__count) {
    background: transparent;
    bottom: 8px;
    right: 12px;
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    transition: transform 0.3s ease;
}

.image-item:hover {
    transform: scale(1.05);
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.image-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

.image-actions:hover {
    background: rgba(0, 0, 0, 0.9);
}

.create-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f0f2f5;
}

.image-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #606266;
    font-weight: 500;
    transition: color 0.3s ease;
}

.image-upload-btn:hover {
    color: #409eff;
}

.publish-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border: none;
    transition: all 0.3s ease;
}

.publish-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.4);
}

.publish-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 帖子列表样式 */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #909399;
    gap: 12px;
    font-size: 15px;
}

.empty-state {
    padding: 60px 20px;
    text-align: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.empty-illustration {
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-text {
    color: #909399;
    font-size: 15px;
    margin: 0;
}

.load-more {
    text-align: center;
    padding: 30px;
}

.load-more-btn {
    color: #409eff;
    font-weight: 500;
    padding: 12px 32px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background: #ecf5ff;
    transform: translateY(-1px);
}

.no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.no-more-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e4e7ed, transparent);
}

.no-more-text {
    color: #909399;
    font-size: 14px;
    font-weight: 500;
    padding: 0 16px;
}

/* 图片预览样式 */
.image-preview-dialog :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
}

.image-preview-dialog :deep(.el-dialog__header) {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f2f5;
    margin: 0;
}

.image-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px;
}

.preview-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.preview-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.nav-btn,
.close-btn {
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.close-btn {
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border: none;
}

.close-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .circle-detail-container {
        padding: 16px;
        background: #f5f7fa;
    }

    .main-content {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .circle-info-section {
        order: 2;
    }

    .posts-section {
        order: 1;
    }

    .circle-info-card,
    .members-preview,
    .post-create-card {
        border-radius: 12px;
        padding: 20px;
    }

    .circle-name {
        font-size: 22px;
    }

    .image-preview {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
